<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: xuechengwu@myhexin.com
 * @Date: 2021-11-23 14:32:30
 * @LastEditTime: 2021-11-23 18:41:33
 * @LastEditors: xuechengwu
-->
<template>
  <div class="page-config">
      <div class="page-source-btn" @click="show = true">
          添加数据源
      </div>
      <el-dialog
        title=""
        :visible.sync="show"
        lock-scroll
        modal
        show-close
        >
        <div class="body-content">
            <div class="source-search-box">
                <div class="input-box">
                    <el-input size="mini" v-model="api"/>
                </div>
                <el-button @click="searchData" size="mini">查询</el-button>
            </div>
            <div class="source-search-box">
                <label>名称</label>
                <div class="input-box">
                    <el-input size="mini" v-model="name"/>
                </div>
            </div>
            <div class="response-content">
                <el-tree :data="treeData" :props="defaultProps" ></el-tree>
            </div>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="show = false">取消</el-button>
            <el-button type="success" @click="onOk">确认</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
function getTree(data) {
    if (typeof data !== 'object') {
        return [{
            label: data,
        }];
    }
    const keys = Object.keys(data);
    return keys.map(vo => ({
        label: vo,
        children: getTree(data[vo]),
    }));
}
import axios from 'axios';
export default {
    data() {
        return {
            show: false,
            api: '',
            treeData: [],
            dataKey: '',
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            name: '',
            queryData: '',
        };
    },
    methods: {
        searchData() {
            const { api } = this;
            axios({
                method: 'get',
                params: {
                    api,
                },
                url: '/api/getData',
            }).then((res) => {
                const { data } = res;
                const { key, data: value } = data;
                this.dataKey = key,
                this.treeData = getTree(value);
                this.queryData = value;
            });
        },
        onOk() {
            if (this.api !== '') {
                this.$store.commit('ADD_INTERFACE', {
                    key: this.dataKey,
                    api: this.api,
                    data: this.queryData,
                    name: this.name,
                });
            }
            this.show = false;
            
        },
    }
}
</script>

<style lang="less" scoped>
.body-content {
    padding: 0 64px;
}
.source-search-box {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .input-box {
        padding: 0 12px;
        flex: 1;
    }
}
.response-content {
    height: 320px;
    overflow: auto;
}
.page-config {
    padding: 8px 12px;
    .page-source-btn {
        padding: 8px 12px;
        border: solid 1px #333;
        text-align: center;
    }
}
</style>